<template>
  <div class="feature-selected-scatter-graph">
    <div class="canvas" ref="ele">

    </div>
  </div>
</template>

<script>
/*eslint-disable */
import echarts from "echarts";
import _ from "lodash";

//保证 17个颜色
const COLORFUL_COLORS = [
  "#516b91", //1
  "#59c4e6", //2
  "#edafda", //3
  "#93b7e3", //4
  "#a5e7f0", //5
  "#cbb0e3", //6
  "#893448", //7
  "#d95850", //8
  "#eb8146", //9
  "#ffb248", //10
  "#fc97af", //11
  "#87f7cf", //12
  "#72ccff", //13
  "#d4a4eb", //14
  "#d4a4eb", //15
  "#8fd3e8", //16
  "#71669e" //17
];

const GRAY = "#9c9c9c";

export default {
  data() {
    return {
      chart: echarts.init(document.createElement("null"))
    };
  },
  props: {
    data: {
      type: Array
    },
    good_feature_name_func: {
      type: Function
    },
    attributes_in_common_selected: {
      type: Array
    }
  },
  computed: {
    canvas_width() {
      return this.chart.getWidth();
    },
    xAxisLength() {
      return this.canvas_width - this.opt_grid.left - this.opt_grid.right;
    },
    trend_colors() {
      return this.$store.state.trend_colors;
    },
    gray_colors() {
      return this.$store.state["gray_colors"];
    },
    opt_grid() {
      return {
        left: 30,
        right: 30,
        bottom: 50,
        top: 30
      };
    },
    opt_xAxis() {
      let vue = this;
      return {
        type: "category",
        // data: this.data.map(e => e.feature_name),
        data: _.range(0, this.data.length),
        axisTick: {
          interval: 0,
          length: 5,
          alignWithLabel: true, //保证刻度线和标签对齐
          lineStyle: {
            color: this.gray_colors[0] || "#333"
          }
        },
        axisLabel: {
          interval: 0,
          formatter: function(value, index) {
            return vue.good_feature_name_func(vue.data[index]["feature_name"]);
          },
          color: this.gray_colors[1]
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: this.gray_colors[0]
          }
        }
      };
    },
    opt_yAxises() {
      return this.data.map((e, i) => {
        return {
          type: "value",
          scale: true,
          position: "left",
          name: "  " || this.good_feature_name_func(e.feature_name),
          show: true,
          axisLine: {
            onZero: false,
            lineStyle: {
              color: this.gray_colors[0]
            }
          },
          offset:
            // -1 * (i * 2 + 1) * (this.xAxisLength / (this.data.length * 2)),
            i * -1 * (this.xAxisLength / this.data.length),
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        };
      });
    },
    opt_scatter_serieses() {
      return this.data.map((e, i) => {
        return {
          type: "scatter",
          name: e.feature_name,
          xAxisIndex: 0,
          yAxisIndex: i,
          symbol: "rect",
          symbolSize: [15, 1],
          hoverAnimation: true,
          data: e.feature_data.map(e => {
            return [i, e.value];
          }),
          itemStyle: {
            opacity: 0.5,
            emphasis: {
              opacity: 1
            },
            color: ($ => {
              let copy_arr = _.clone(this.attributes_in_common_selected);
              let ii = 0;
              copy_arr.forEach((e, index) => {
                if (e) {
                  copy_arr[index] = ii;
                  ii++;
                } else {
                  copy_arr[index] = -1;
                }
              });
              
              return this.attributes_in_common_selected[i]
                ? copy_arr[i] >= 0 && copy_arr[i] <= 1
                  ? this.trend_colors[copy_arr[i]]
                  : COLORFUL_COLORS[i]
                : GRAY;
            })()
          },
          emphasis: {
            itemStyle: {
              opacity: 1
            }
          }
        };
      });
    },
    opt_echarts() {
      let vue = this;
      return {
        grid: this.opt_grid,
        xAxis: [this.opt_xAxis],
        yAxis: [...this.opt_yAxises],
        series: [...this.opt_scatter_serieses],
        tooltip: {
          /**@description 显示时效果跟随Y轴的颜色 后面的什么 backgroundColor textStyle都失效*/
          trigger: "axis",
          lineStyle: {
            opacity: 0.1
          },
          shadowStyle: {
            opacity: 1
          },
          axisPointer: {
            type: "line" || "cross",
            axis: "y",
            snap: false,
            label: {
              show: true,
              formatter: function(params) {
                // debugger
                if (_.isNumber(params.value)) {
                  if (params.seriesData && params.seriesData.length) {
                    let feature_name = params.seriesData[0].seriesName;
                    let value = params.value;
                    return `${value}`;
                  }
                }
                if (_.isString(params.value)) {
                  //说明是表示x轴的index
                  return vue.data[params.value].feature_name;
                }
              }
            }
          },
          showContent: false,
          backgroundColor: "black",
          borderColor: "red",
          textStyle: {
            color: "blue"
          },
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
        }
      };
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs["ele"]);
    this.chart.setOption(this.opt_echarts);
  },
  watch: {
    opt_echarts(val) {
      this.chart.clear();
      this.chart.setOption(val);
    }
  }
};
</script>

<style lang="scss">
.feature-selected-scatter-graph {
  .canvas {
    height: 218px;
    width: 1294px;
  }
}
</style>
